import { Button, Tooltip } from 'antd';
// import { getColumnSearchProps } from '@/pages/finance/withdraw/utils'
import { ColumnProps } from 'antd/lib/table';
import React from 'react';
import moment from 'moment';
import {
  getElliStyleElement,
  initTabWidth,
  withdrawStatusMap,
} from '@/pages/finance/withdraw/utils';
import { checkPermission } from '@/utils/resolvePermission';

interface StateType {
  [propName: string]: any;
}
export const getColumns = (self: any) => {
  const withdrawTypeMap = {
    0: '人工打款',
    1: '自动出款',
    2: '三方手动出款',
  };
  const userTypeMap = {
    0: '会员',
    1: '代理',
  };
  const formData = (obj: any) =>
    Object.keys(obj).map(key => ({
      text: obj[key],
      value: key,
    }));
  const columns: ColumnProps<StateType>[] = [
    {
      title: '提现时间',
      dataIndex: 'createDate',
      render: time => time && <span>{moment(time).format('YY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '提现单号',
      dataIndex: 'orderId',
    },
    {
      title: '提现金额',
      dataIndex: 'amount',
    },
    {
      title: '手续费',
      dataIndex: 'fee',
    },
    {
      title: '出款金额',
      render: (text: any, rowData: any) => (
        <span>
          {rowData.status === 1 || rowData.status === 8 ? rowData.amount - rowData.fee : ''}
        </span>
      ),
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      render: key => {
        const colorMap = {
          '-3': 'red',
          '-2': 'blue',
          0: 'red',
          1: 'blue',
          2: 'blue',
          3: 'green',
          4: 'blue',
          5: 'blue',
          6: 'green',
          7: 'green',
          8: 'blue',
          9: 'blue',
          10: 'green',
          11: 'green',
        };
        return (
          <span style={{ fontWeight: 'bold', color: colorMap[key] }}>{withdrawStatusMap[key]}</span>
        );
      },
    },
    {
      title: '账户名',
      dataIndex: 'username',
    },
    {
      title: '账户类型',
      dataIndex: 'userType',
      filters: formData(userTypeMap),
      filterMultiple: false, // 是否多选
      render: userType => <span>{userTypeMap[userType]}</span>,
    },
    {
      title: '用户层级',
      dataIndex: 'userLevel',
    },
    {
      title: '提现类别',
      dataIndex: 'withdrawType',
      filters: formData(withdrawTypeMap),
      filterMultiple: false, // 是否多选
      render: (text: any, rowData: any) => {
        if (+rowData.status !== -3) {
          return <span>{withdrawTypeMap[rowData.withdrawType]}</span>;
        }
        return '';
      },
    },
    {
      title: '出款商户',
      dataIndex: 'merchant',
    },
    {
      title: '出款卡信息',
      render: (text: any, rowData: any) => (
        <span>{`${rowData.transferBankName} ${rowData.transferBankCardNo} ${rowData.transferName}`}</span>
      ),
    },
    {
      title: '出款时间',
      dataIndex: 'approveTime',
      render: time => time && <span>{moment(time).format('YY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      render: (text: any, rowData: any) => {
        if (checkPermission(self.props.btns, 'new-finance-withdraw-history-record-update-mark')) {
          if (rowData.remark === '') {
            return (
              <a
                onClick={() => {
                  self.showUpdataRemarkModal(rowData);
                }}
              >
                添加备注
              </a>
            );
          }
          return (
            <span
              onClick={() => {
                self.showUpdataRemarkModal(rowData);
              }}
              style={{ color: '#009351' }}
            >
              {getElliStyleElement(rowData.remark, 130)}
            </span>
          );
        }
        return <span>{getElliStyleElement(rowData.remark, 130)}</span>;
      },
    },
    {
      title: '操作',
      fixed: 'right',
      width: 130,
      render: (text: any, rowData: any) => {
        const sign1 = rowData.status === 7 || rowData.status === 10;
        const sign2 = rowData.status === 10;
        return (
          <span>
            {sign1 &&
              (checkPermission(
                self.props.btns,
                'new-finance-withdraw-history-record-force-success',
              ) ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5 }}
                  onClick={() => {
                    self.saveForceSuccess(rowData);
                  }}
                >
                  强制成功
                </Button>
              ) : (
                ''
              ))}

            {sign1 &&
              (checkPermission(
                self.props.btns,
                'new-finance-withdraw-history-record-back-balance',
              ) ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5, backgroundColor: 'green' }}
                  onClick={() => {
                    self.saveWithdrawReturn(rowData);
                  }}
                >
                  退回余额
                </Button>
              ) : (
                ''
              ))}

            {sign2 &&
              (checkPermission(
                self.props.btns,
                'new-finance-withdraw-history-record-verify-order-status',
              ) ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5, backgroundColor: 'gray' }}
                  onClick={() => {
                    self.withdrawStatusConfim(rowData);
                  }}
                >
                  验证状态
                </Button>
              ) : (
                ''
              ))}

            <Button
              type="danger"
              style={{
                backgroundColor: 'orange',
                border: 'none',
                marginLeft: 5,
                marginTop: 5,
                color: 'white',
              }}
              onClick={() => {
                self.showDetailsModal(rowData);
              }}
            >
              详情
            </Button>
          </span>
        );
      },
    },
  ];
  initTabWidth(columns);
  return columns;
};
